/**
 * @format
 * @Description: Flex布局className
 * @Autho: luckybo
 * @Date: 2019-06-25 10:06:16
 * @LastEditors: luckybo
 * @LastEditTime: 2019-06-25 14:43:42
 */

.f-auto {
  flex: auto;
}

// 不放大 不缩小，以自己的大小为基准
.f-none {
  flex: none;
}

.f-0 {
  flex: 0;
}

.f-1 {
  flex: 1;
}

.f-2 {
  flex: 2;
}

.f-3 {
  flex: 3;
}

.f-4 {
  flex: 4;
}

.f-5 {
  flex: 5;
}

.f-6 {
  flex: 6;
}

// flex width height---------------------------------------
.f-full-height {
  height: 100%;
}

.f-full-width {
  width: 100%;
}

.f-half-width {
  width: 50%;
}

// flex-direction ----------------------------------------
//水平分布
.f-row {
  display: flex;
  flex-direction: row;
}

//垂直分布
.f-column {
  display: flex;
  flex-direction: column;
}

//水平反方向分布
.f-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

//垂直反方向分布
.f-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

// fle-warp --------------------------------------
//换行
.f-wrap {
  flex-wrap: wrap;
}

//不换行
.f-nowrap {
  flex-wrap: nowrap;
}

//justify-content--------------------------------------
.f-j-start {
  justify-content: flex-start;
}

.f-j-end {
  justify-content: flex-end;
}

.f-j-center {
  justify-content: center;
}

//两端对齐，中间空白
.f-j-between {
  justify-content: space-between;
}

//中间空白分隔
.f-j-around {
  justify-content: space-around;
}

// align-items ------------------------------------
.f-ai-start {
  align-items: flex-start;
}

.f-ai-end {
  align-items: flex-end;
}

.f-ai-center {
  align-items: center;
}

.f-ai-baseline {
  align-items: baseline;
}

.f-ai-stretch {
  align-items: stretch;
}

// 注意这是以定义项目交叉轴方向为基准的
// align-self ----------------------------------------
.f-as-auto {
  align-self: auto;
}

.f-as-start {
  align-self: flex-start;
}

.f-as-end {
  align-self: flex-end;
}

.f-as-center {
  align-self: center;
}

.f-as-stretch {
  align-self: stretch;
}

.f-grow-0 {
  flex-grow: 0;
}

.f-grow-1 {
  flex-grow: 1;
}

.f-shrink-0 {
  flex-shrink: 0;
}

// 需要自行指定高度
.overflow {
  overflow: auto;
}

.clickableTxt {
  cursor: pointer;
  color: #40a9ff;
}

.test-pink {
  background-color: pink;
}

.test-yellow {
  background-color: yellow;
}
